<template>
  <div class="flights">
    <!-- 1.0 主要内容 开始 -->
    <div class="flights_main" v-if="flight">
      <!-- 1.1 列表内容 开始 -->
      <FlightsList :flights="pageList"/>
      <!-- 1.1 列表内容 结束 -->
      <!-- 2.0 分页组件 开始 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="flight.total"
      ></el-pagination>
      <!-- 2.0 分页组件 结束 -->
    </div>
    <!-- 1.0 主要内容 结束 -->
    <!-- 2.0 侧边栏 开始 -->
    <div class="flights_aside">2</div>
    <!-- 2.0 侧边栏 结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 接口返回值 对象
      /* 
      flight={
        flights:[机票列表],总数据条
        info:{航班信息 起飞地方 到达}
        options:{筛选条件数据}
      }
       */
      flight: null,
      // currentPage4: 2,
      // 分页后的机票列表  等于 页面上 看到数据
      // 页面上显示的数据 其实是由 pageList 来决定的!!
      pageList: [],
      currentPage: 1,
      // 页容量
      pageSize: 5,
       // 提供给用户选择的页容量的列表  和我们的分页没有直接的关系!
      pageSizes: [5, 10, 20, 50]
    };
  },
  async mounted() {
    // console.log( this.$route.query);
    const res = await this.$axios.get("/airs", {
      params: this.$route.query,
    });
    // console.log(res);
    this.flight = res.data;
     // 开启分页处理
    this.countList();
  },

  methods: {
    // 页容量改变事件
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      console.log(val);
      this.pageSize = val;
      // 开启分页处理
      this.countList();
    },
    // 当前 页码改变事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
       this.currentPage = val;
      // 开启分页处理
      this.countList();
    },

    // 根据总的数据来计算 分页的数据
    countList() {
      /* 
      1 总的数据 this.flight.flights  29条数据
      2 分页后的数组  this.pageList 
      3 手上有数据的
        1 总数据  总条数  页容量 页码 
      4 模拟
        1 页容量 10条 
        2 页码 1 
          this.flight.flights.filter((v,i)=>{
            if(i<10){
              return true
            }else{
              return false;
            }
          })
       5 模拟
        1 页容量 10条 
        2 页码 2
          this.flight.flights.filter((v,i)=>{
            if(i>10&&i<20){
              return true
            }else{
              return false;
            }
          })

      6 模拟
       1 页容量 5条
       2 页码 1 
        this.flight.flights.filter((v,i)=>{
            if(i>=0&&i<5){
              return true
            }else{
              return false;
            }
          })
      7 模拟
       1 页容量 5条
       2 页码 3 
        this.flight.flights.filter((v,i)=>{
            if(i>10&&i<15){
              return true
            }else{
              return false;
            }
          })
       3 手上有数据的 1 总数据  总条数  页容量 页码 
       4 开始的条数 (当前的页码 - 1 )  *  页容量
        结束的条数 当前的页码 * 页容量   

      8 公式的总结
        开始的条数 (当前的页码 - 1 )  *  页容量
        结束的条数 当前的页码 * 页容量 
        / 页码  this.currentPage
      // 页容量  this.pageSize

        start = ( 1-1 ) * 10 = 0 
        end = 1 * 10 = 10 
         */
      this.pageList = this.flight.flights.filter((v, index) => {
        // 计算开始的条数
        const start = (this.currentPage - 1) * this.pageSize;
        // 计算结束的条数
        const end = this.currentPage * this.pageSize;

        /*
        start = ( 2 - 1  ) * 10 = 10 
        end =  2 * 10 = 20 
        */
        if (index >= start && index < end) {
          return true;
        } else {
          return false;
        }
      });
      /*
        start =( 1 -1  ) * 5 = 0 ;
        end  = 1 * 5 =  5 
       */
       console.log(this.pageList);
    },
  },
};
</script>

<style lang="less" scoped>
.flights {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
  .flights_main {
    width: 740px;
  }
  .flights_aside {
    width: 240px;
  }
}
</style>